<template>
  <el-container>
    <el-main>
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-form ref="sysMsgForm" :model="sysMsgForm" :rules="rules" label-width="80px">
        <el-col :span="14">
          <el-form-item label="消息标题">
            <el-input v-model="sysMsgForm.msgTitle"></el-input>
          </el-form-item>
          <el-form-item label="内容级别">
            <el-col :span="12">
              <el-select v-model="sysMsgForm.msgLevel" placeholder="请选择内容级别">
                <el-option
                  v-for="item in msgLevels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="内容类型">
            <el-col :span="12">
              <el-select v-model="sysMsgForm.msgType" placeholder="请选择内容类型">
                <el-option
                  v-for="item in msgTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="接收者">
            <el-col :span="12">
              <el-select v-model="sysMsgForm.receiveType" placeholder="请选择接收者类型">
                <el-option
                  v-for="item in receiveTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="状态">
            <el-col :span="12">
              <el-select v-model="sysMsgForm.status" placeholder="请选择接收者类型">
                <el-option
                  v-for="item in statuss"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="消息内容">
            <el-input type="textarea" v-model="sysMsgForm.msgContent"></el-input>
          </el-form-item>
          <el-form-item label="有无附件">
            <el-radio-group v-model="sysMsgForm.isAttac">
              <el-radio label="有"></el-radio>
              <el-radio label="无"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editSysMsg('sysMsgForm')">修改</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import {find, update} from '@/api/sysMsg'
  import { EventBus } from '@/api/eventBus'

  export default {
    name: 'sysMsg-edit',
    data() {
      return {
        id: '',
        msgLevels: [ // 数据源
          {value: 1, label: '普通'},
          {value: 2, label: '一般'},
          {value: 3, label: '紧急'},
        ],
        msgTypes: [ // 数据源
          {value: 1, label: '公告'},
          {value: 2, label: '新闻'},
          {value: 3, label: '会议'},
          {value: 4, label: '通知'}
        ],
        receiveTypes: [ // 数据源
          {value: "0", label: '全部'},
          {value: "1", label: '用户'},
          {value: "2", label: '部门'},
          {value: "3", label: '角色'},
          {value: "4", label: '岗位'}
        ],
        statuss: [ // 数据源
          {value: 0, label: '草稿'},
          {value: 1, label: '审核'},
          {value: 2, label: '驳回'},
        ],
        sysMsgForm: {
          msgTitle: '',
          msgLevel: '',
          msgType: '',
          msgContent: '',
          receiveType: '',
          status: '',
          isAttac: ''
        },
        clicked: false,
        rules: {
          msgTitle: [
            {required: true, message: '请输入消息标题', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          msgLevel: [
            {required: true, message: '请选择消息级别', trigger: 'blur'}
          ],
          msgType: [
            {required: true, message: '请选择消息类型', trigger: 'blur'}
          ],
          msgContent: [
            {required: true, message: '请输入消息内容', trigger: 'blur'}
          ],
          receiveType: [
            {required: true, message: '请选择接收者类型', trigger: 'blur'}
          ],
          status: [
            {required: true, message: '请选择状态', trigger: 'blur'}
          ],
          isAttac: [
            {required: true, message: '请选择有无附件', trigger: 'blur'}
          ]
        },
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='sysMsg-edit' && newVal.query.id!=this.id) {
          this.loadEditSysMsg()
        }
      }
    },
    created() {
      console.log(this.$route.query)
      this.loadEditSysMsg()
    },
    methods: {
      loadEditSysMsg() {
        this.id = this.$route.query.id
        find(this.id).then(res => {
          console.log(res)
          this.sysMsgForm = res.data.sysMsg
        }).catch(err => {
          console.log(err)
        })
      },
      editSysMsg(sysMsgForm) {
        this.$refs[sysMsgForm].validate((valid) => {
          if (valid) {
            this.clicked = true
            update(this.sysMsgForm).then(res => {
              console.log(res)
              this.clicked = false
              this.$message({
                message: res.content,
                offset: 120,
                center: true
              });
              EventBus.$emit('sysMsg-edit', res.data)
              this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews})=>{
                this.$router.push({
                  path: '/sysMsg/list'
                })
              })
            }).catch(err => {
              console.log(err)
              this.clicked = false
            })
          } else {
            console.log('err submit')
            return false
          }
        })
        console.log('submit!');
      }
    }
  }
</script>
